<template>
  <div class="interpretation-config pd-20">
    <el-form :inline="true">
      <el-form-item label="医院名称：">
        <el-input placeholder="请输入医院名称"
                  clearable
                  class="w-200"
                  @clear="handleQuery"
                  v-model="searchParams.hospitalName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"
                   type="primary">查 询</el-button>
        <el-button @click="handleOption('add', null)"
                   type="primary">新 增</el-button>
      </el-form-item>
    </el-form>
    <element-table class="mt-20"
                   v-loading="loading"
                   :columns="columns"
                   :data="tableData"
                   pager
                   :pageTotal="pageTotal"
                   :pageSize="pageSize"
                   :pageIndex="pageIndex"
                   @handleChangePage="handleChangePage">
      <template v-slot:serviceName="{row}">
        <el-tag v-for="(item, index) in row.serviceName"
                :key="index"
                :type="index === 0 ? 'primary' : index === 1 ? 'danger' : index === 2 ? 'warning': 'info'"
                style="margin-right:10px">{{item}}</el-tag>
      </template>
      <template v-slot:option="{row}">
        <el-button type="primary"
                   @click="handleOption('edit', row)">编 辑</el-button>
<!--        <el-button type="danger"-->
<!--                   @click="handleOption('del', row)">删 除</el-button>-->
      </template>
    </element-table>
    <interpretation-config-dialog :interpretationConfigObj="interpretationConfigObj"
                                  v-if="isShowInterpretationConfig"
                                  :visible.sync="isShowInterpretationConfig"></interpretation-config-dialog>
  </div>
</template>
<script>
import elementTable from '@/base/ElementTable'
import interpretationConfigDialog from './interpretationConfigDialog'
export default {
  name: 'interpretationConfig', // 解读配置
  data () {
    return {
      loading: false,
      searchParams: {
        hospitalName: ''
      },
      columns: [
        {
          label: '医院名称',
          prop: 'name'
        },
        {
          label: '开通业务',
          prop: 'serviceName',
          isSlot: true
        },
        {
          label: '解读医生数量',
          prop: 'count',
          showToolTip: true
        },
        {
          label: '操作',
          prop: 'option',
          width: 200,
          align: 'center',
          isSlot: true
        }
      ],
      tableData: [],
      pageTotal: 0,
      pageIndex: 1,
      pageSize: 10,
      isShowInterpretationConfig: false
    }
  },
  methods: {
    handleQuery() {
      this.pageIndex=1
      this.getList()
    },
    async getList () {
      this.loading = true
      const { data: res } = await this.post(this.api.fourHigh.queryRemoteRead, {
        pageIndex: this.pageIndex - 1,
        pageSize: this.pageSize,
        ...this.searchParams
      })
      if (res.code === '200') {
        this.loading = false
        this.tableData = res.object.map(item => ({
          ...item,
          serviceName: item.serviceName.search(',') ? item.serviceName.split(',') : [item.serviceName],
        }))
        this.pageTotal = res.totalNum
      }
    },
    // 操作
    handleOption (op, row) {
      switch (op) {
        case 'add':
          this.isShowInterpretationConfig = true
          this.interpretationConfigObj = null
          break;
        case 'edit':
          this.isShowInterpretationConfig = true
          this.interpretationConfigObj = row
          break;
        case 'del':
          this.$confirm('是否确认删除?', '提示', {
            type: 'warning'
          }).then(() => {

          })
          break;
      }
    },
    // 分页
    handleChangePage (page) {
      this.pageIndex = page
      this.getList();
    },
  },
  created () {
    this.getList()
  },
  components: {
    'element-table': elementTable,
    'interpretation-config-dialog': interpretationConfigDialog
  },
}
</script>
<style lang="scss" scoped>
</style>
